<template>
  <div v-if="post !== null">
    <div style="margin: 10px;">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/forum', query: {id: post.partitionID, name: post.partitionName} }"
                            v-if="post.partitionID !== 0">{{post.partitionName}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{this.post.title}}</el-breadcrumb-item>
      </el-breadcrumb>

    </div>

    <!-- 标题 -->
    <div>
      <div style="width: 850px;">
        <span class="title">
          {{post.title}}
        </span>
        <span style="float: right; margin-top: 10px;"
              v-if="userPower !== 0">
          <template>
            <el-popconfirm title="确定删除该帖子吗？"
                           @onConfirm="deleteThis">
              <el-button type="danger"
                         icon="el-icon-delete"
                         circle
                         size="mini"
                         slot="reference">
              </el-button>
            </el-popconfirm>
          </template>
        </span>

      </div>
      <!-- 内容 -->
      <post-content v-if="post !== null && currentPage === 1"
                    :id="Number($route.query.id)"
                    :userID="post.userID"
                    :content="post.content"
                    :time="post.postTime"
                    :userName="post.userName"
                    :replyFloor="-1"></post-content>

      <post-content v-for="(item, index) in post.replyList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                    :id="item.replyID"
                    :key="index"
                    :userID="item.userID"
                    :content="item.content"
                    :replyFloor="item.replyFloor"
                    :userName="item.userName"
                    @afterDelete="getReplies"
                    :time="item.replyTime"></post-content>
      <el-pagination @current-change="currentChange"
                     :current-page="currentPage"
                     :page-size="pageSize"
                     layout="total, prev, pager, next, jumper"
                     :total="post.replyList.length"
                     hide-on-single-page>
      </el-pagination>

      <!-- 回帖文本框 -->
      <wang-editor v-model="replyHtmlContent"
                   ref="editor"
                   style="margin: 10px;"></wang-editor>
      <el-button type="primary"
                 @click="reply"
                 style="margin-left: 10px;"
                 :disabled="!login">回帖</el-button>
    </div>
    <!-- 返回顶部 -->
  </div>
</template>

<script>
import postContent from '../components/PostContent.vue'
import wangEditor from '../components/WangEditor.vue'
export default {
  name: 'Post',
  components: {
    postContent,
    wangEditor
  },
  data () {
    return {
      currentPage: 1,
      pageSize: 5,
      replyHtmlContent: '',
      post: null
    }
  },
  computed: {
    login () {
      return this.$store.getters.loginState
    },
    userPower () {
      return this.$store.getters.userPower
    }
  },
  methods: {
    currentChange (page) {
      this.currentPage = page
      window.scrollTo(0, 0)
    },
    reply () {
      this.axios.post('addreply', {
        userID: this.$store.getters.userID,
        username: 'test name', // to be deleted
        postID: this.$route.query.id,
        content: this.replyHtmlContent,
        isAnnouncement: Number(this.$route.query.announcement)
      })
        .then(response => {
          if (response.status === 200) {
            if (response.data.err === 200) {
              this.$notify({
                title: '发布回帖成功',
                position: 'top-left'
              })
              this.getReplies()
            } else {
              this.$notify({
                title: '发布回帖失败',
                message: response.data.message,
                position: 'top-left'
              })
            }
          } else {
            this.$notify({
              title: '发布回帖失败',
              message: '网络错误',
              position: 'top-left'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    deleteThis () {
      if (this.$route.query.announcement) this.deleteNotice()
      else this.deletePost()
    },
    deleteNotice () {
      this.axios.post('delnotice', {
        userID: this.$store.getters.userID,
        postID: Number(this.$route.query.id)
      })
        .then(response => {
          if (response.status === 200) {
            if (response.data.err === 200) {
              console.log(this.post.partitionID)
              if (this.post.partitionID === 0) this.$router.push('/') // back to home
              else this.$router.push({ path: '/forum', query: { id: this.post.partitionID, name: this.post.partitionName } }) // back to forum
              this.$notify({
                title: '删除公告成功',
                position: 'top-left'
              })
            } else if (response.data.err === 2) {
              this.$notify({
                title: '删除公告失败',
                message: '您的权限不足',
                position: 'top-left'
              })
              this.$store.commit('setPower', response.data.userPower)
            } else if (response.data.err === 3) {
              this.$notify({
                title: '删除公告失败',
                message: '您的帐号已被封禁，已退出登录',
                position: 'top-left'
              })
              this.$store.commit('logout')
            } else {
              this.$notify({
                title: '删除失败',
                message: response.data.message,
                position: 'top-left'
              })
            }
          } else {
            this.$notify({
              title: '删除失败',
              message: '网络错误',
              position: 'top-left'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    deletePost () {
      this.axios.post('delpost', {
        userID: this.$store.getters.userID,
        postID: Number(this.$route.query.id)
      })
        .then(response => {
          if (response.status === 200) {
            if (response.data.err === 200) {
              this.$notify({
                title: '删除帖子成功',
                position: 'top-left'
              })
              if (this.post.partitionID === 0) this.$router.push('/') // back to home
              else this.$router.push({ path: '/forum', query: { id: this.post.partitionID, name: this.post.partitionName } }) // back to forum
            } else if (response.data.err === 2) {
              this.$notify({
                title: '删除帖子失败',
                message: '您的权限不足',
                position: 'top-left'
              })
              this.$store.commit('setPower', response.data.userPower)
            } else if (response.data.err === 3) {
              this.$notify({
                title: '删除帖子失败',
                message: '您的帐号已被封禁，已退出登录',
                position: 'top-left'
              })
              this.$store.commit('logout')
            } else {
              this.$notify({
                title: '删除失败',
                message: response.data.message,
                position: 'top-left'
              })
            }
          } else {
            this.$notify({
              title: '删除失败',
              message: '网络错误',
              position: 'top-left'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    getReplies () {
      this.axios.post('getreply', {
        postID: Number(this.$route.query.id),
        isAnnouncement: Number(this.$route.query.announcement)
      })
        .then(response => {
          if (response.status === 200) {
            if (response.data.err === 200) {
              this.post = response.data
              console.log(response.data)
              this.$refs.editor.clear()
              window.scrollTo(0, 0)
            } else {
              this.$notify({
                title: '获取回帖失败',
                message: response.data.message,
                position: 'top-left'
              })
            }
          } else {
            this.$notify({
              title: '获取回帖失败',
              message: '网络错误',
              position: 'top-left'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    }
  },
  mounted () {
    // get replies
    this.getReplies()
  }
}
</script>

<style scoped>
.title {
  border: solid;
  border-color: #f2f6fc;
  margin: 10px;
  width: 794px;
  padding: 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  display: inline-block;
}
.some {
  margin: 10px;
  min-height: 400px;
  width: 800px;
  border: solid;
  border-color: #f2f6fc;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
</style>
